<template>
  <div class="box">
    <div class="header">
      <img src="@/assets/images/return.png" @click="back" class="header_img"/>
      <div class="title">签约开发者</div>
    </div>
    <div class="signing">
      <div class="signing_text">
        <div class="s_title">签约开发者说明</div>
        <div class="s_desc">开发者申请签约通过后,才能在平台上接单,包括平台项目派单、接受需求方预约雇佣等，并享受交易担保服务。</div>
        <div class="u_title">申请签约需要满足以下条件</div>
        <div class="lis_box">
          <div class="lis">1、3年及以上正规互联网工作经验；</div>
          <div class="lis">2、按要求如实填写个人简历；</div>
          <div class="lis">3、具有契约精神、服务意识、能按约定高效完成任务；</div>
          <div class="lis">4、不在程序员客栈黑名单(无开发黑历史)。</div>
        </div>
      </div>
    </div>
    <div class="agree_checkBox" @click="setSelect">
      <div :class="['selected_img',isAdvance? 'selected_show' : 'selected_hide']"></div>
      <div class="agree_text">我已阅读并同意</div>
    </div>
    <div class="xy">
      <a class="xy_a">&lt;&lt;客栈服务协议&gt;&gt;</a> <a class="xy_a">&lt;&lt;客栈运程工作服务协议&gt;&gt;</a>
    </div>
    <div class="btn"><div class="btn-green">完善简历并申请签约</div></div>
  </div>
</template>

<script>
    export default {
        name: "Signing",
        data(){
          return {
            isAdvance: false
          }
        },
        methods:{
          back(){
            if(this.$route.query.app){
              window.webkit.messageHandlers.signing.postMessage({});
            }else{
              this.$router.back()
            }
          },
          setSelect() {
            this.isAdvance = !this.isAdvance
          },
        }
    }
</script>

<style scoped>
  .header {
    top: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    height: 90px;
    background-color: #8ec43e;
    align-items: center;
    padding: 0 30px;
  }
  .header_img {
    width: 17px;
    height: 30px;
  }

  .title {
    text-align: center;
    flex: 1;
    font-size: 30px;
    color: #ffff;
  }
  .signing{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 750px;
    height: 700px;
    background: url("~@/assets/images/signing@2x.png") left center no-repeat;
    background-origin: border-box;
    background-size: 750px 700px;
  }
  .signing_text{
    box-sizing: border-box;
    padding: 0 30px 23px 30px;
    width: 690px;
    background: #ffffff;
    border-radius: 10px;
    margin-bottom: 24px;
  }
  .s_title{
    line-height: 28px;
    font-size: 28px;
    color: rgb(142,196,62);
    margin-top: 50px;
  }
  .s_desc{
    line-height: 38px;
    font-size: 24px;
    color: rgb(84,84,84);
    margin-top: 23px;
  }
  .u_title{
    font-weight: bold;
    margin-top: 23px;
    font-size: 24px;
    color: rgb(43,43,43);
  }
  .lis_box{
    margin-top: 15px;
  }
  .lis{
    line-height: 38px;
    font-size: 24px;
    color: rgb(84,84,84);
  }
  .agree_checkBox{
    margin-top: 30px;
    margin-left: 60px;
    display: flex;
    align-items: center;
  }
  .agree_text{
    font-size: 24px;
    color: rgb(84,84,84);
  }
  .selected_img{
    width: 30px;
    height: 30px;
    margin-right: 20px;
  }
  .selected_show{
    background:  url("~@/assets/images/selected@2x.png") left center no-repeat;
    background-size: cover;
  }
  .selected_hide{
    background:  url("~@/assets/images/unSelected@2x.png") left center no-repeat;
    background-size: cover;
  }
  .xy{
    margin-top: 20px;
    margin-left: 60px;
  }
  .xy_a{
    margin-right: 16px;
    line-height: 24px;
    font-size: 24px;
    color: rgb(142,196,62);
  }
  .btn{
    margin-top: 80px;
    display: flex;
    justify-content: center;
  }
  .btn-green{
    width: 680px;
    height: 80px;
    color: rgb(255,255,255);
    font-size: 30px;
    line-height: 80px;
    border-radius: 10px;
    background-color: rgb(142,196,62);
    text-align: center;
  }
</style>
